<template>
  <div class="w-page">
    <div class="w-banneritem" :style="{backgroundImage: 'url(' + bgimg + ')' }">
    </div>
    <div class="w-con">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" :key="item.id">
            <div class="w-item flex vc hb" @click="detail(item.id)">
              <van-image class="shrink0 w-itemimg" width="107" height="76" fit="cover" :src="item.coverPicture"/>
              <div class="w-right flex hb column">
                <div class="w-title">{{item.title}}</div>
                <div class="w-desc">{{item.content.replace(/<[^>]+>/g,"")}}</div>
                <p class="w-time">{{item.createTime.substring(0,10)}}</p>
              </div>
            </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { articleClassList } from '@/api/article'
import {
  List,
  Image
} from 'vant'
export default {
  components: {
    [List.name]: List,
    [Image.name]: Image
  },
  data () {
    return {
      bgimg: require('../assets/img/first/banner.png'),
      list: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  created () {
  },
  methods: {
    dataList () {
      articleClassList({ classId: 9, page: this.page }).then(response => {
        this.list.push.apply(this.list, response.data.list)
        this.loading = false
        this.finished = response.data.isLastPage
      })
    },
    onLoad () {
      this.dataList()
      this.page += 1
    },
    detail (id) {
      this.$router.push({ path: '/new/detail', query: { id: id } })
    }
  }
}
</script>

<style scoped>
  .w-page {
    height: 100vh;
    width: 100vw;
  }

  .w-banneritem {
    width: 100vw;
    height: 150px;
    background-size: cover;
    background-position: center;
  }

  .w-con {
    height: calc(100vh - 150px);
    overflow: scroll;
  }

  .w-itemimg {
    margin-right: 10px;
  }

  .w-time {
    text-align: right;
    font-size: 13px;
    color: #707070;
  }

  .w-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #313131;
    font-size: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-align: justify;
    overflow:hidden;
  }
  .w-desc{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 25px;
    color: #313131;
    font-size: 12px;
    overflow: hidden;
  }

  .w-right {
    height: 76px;
    width: calc(100% - 125px);
  }
</style>
